<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="layout" content="main" />
    <title>Bar Chart example</title>
    <gui:resources components="['chart']" mode='debug'/>
</head>

<body class='yui-skin-sam'>

    <h2>Bar Chart</h2>

    <div id='barChart' style="width:600px; height: 400px"></div>

    <gui:barChart
        id='myBarChart'
        renderTo="barChart"
        data="[
            [ year: 2003, revenue: 1246852, expense: 1123359, income: 123493 ],
            [ year: 2004, revenue: 2451876, expense: 2084952, income: 366920 ],
            [ year: 2005, revenue: 2917246, expense: 2587151, income: 330095 ],
            [ year: 2006, revenue: 3318185, expense: 3087456, income: 230729 ]
        ]"
        xAxis="[
            type:'numeric',
            format: [prefix:'$', thousandsSeparator: ',', decimalPlaces: 2],
        ]"
        seriesDefs="[
            [
                revenue: 'Revenue'

            ],
            [
                expense: 'Expense'
            ],
            [
                income: 'Income',
                type: 'line'
            ]
        ]"
    />

</body>
</html>